<div style="margin-top: 10px;height: 34px;"  class="container-div ui-layout-center">
    <div class="layui-col-md2" style="margin-right: 30px;">
        <input type="text" style="width:220px;" class="form-control" required  id="creTime"  placeholder="请选择日期范围"  autocomplete="off" >
    </div>
    <a class="btn btn-info" onclick="chartPage.query()">查询</a>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("incomeAndUse:incomeChart:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("incomeAndUse:useChart:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="ipUse" style="width: 100%;height:370px;"></div>
</div>
</div>

<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:forwardIncome:chartExport")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="forwardIncome4" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:h5Income:chartExport")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="h5Income4" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:forwardIpUse:chartExport")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="forwardIpUse4" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:h5IpUse:chartExport")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="h5IpUse4" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:forwardOutIncome:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_forwardOutIncome" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:forwardInsideIncome:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_forwardInsideIncome" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:forwardOutIpUse:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_forwardOutIpUse" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:forwardInsideIpUse:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_forwardInsideIpUse" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newTotalIncome:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newTotalIncome" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newForwardIncome:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newForwardIncome" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newH5Income:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newH5Income" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newIpUse:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newIpUse" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newForwardIpUse:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newForwardIpUse" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newH5IpUse:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newH5IpUse" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newForwardOutIncome:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newForwardOutIncome" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newForwardInsideIncome:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newForwardInsideIncome" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newForwardOutIpUse:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newForwardOutIpUse" style="width: 100%;height:370px;"></div>
</div>
</div>
<div class="row chartsBox">
    <div class="col-md-12">
        <#if shiro.hasPermission("income:newForwardInsideIpUse:exportExcel")>
        <div class="exportExcelBox">
            <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
        </div>
    </#if>
    <div id="income_newForwardInsideIpUse" style="width: 100%;height:370px;"></div>
</div>
</div>

<script type="text/javascript">
    $(function () {
        chartPage.init();
        chartPage.showDateRange();
    });

    var chartPage = {
        init:function (time,timeType) {
            var _this = this;
            _this.setTimer(time,timeType);
            // _this.goToDetails();
        },
        query:function () {
            var _this = this;
            var value = $("#creTime").val();
            if(value){
                var spliTime = value.split(' - ');
                var beginDate   = spliTime[0];
                var endDate  = spliTime[1];
                _this.getIncomeData(beginDate,endDate);
                _this.getIpUse(beginDate,endDate);
                _this.getForwardIncome4(beginDate,endDate);
                _this.getH5Income4(beginDate,endDate);
                _this.getForwardIpUse4(beginDate,endDate);
                _this.getH5IpUse4(beginDate,endDate);
                _this.getNewTotalIncome5(beginDate,endDate);
                _this.getNewForwardIncome5(beginDate,endDate);
                _this.getNewH5Income5(beginDate,endDate);
                _this.getNewIpUse5(beginDate,endDate);
                _this.getNewForwardIpUse5(beginDate,endDate);
                _this.getNewH5IpUse5(beginDate,endDate);
                _this.getForwardOutIncome5(beginDate,endDate);
                _this.getForwardInsideIncome5(beginDate,endDate);
                _this.getForwardOutIpUse5(beginDate,endDate);
                _this.getForwardInsideIpUse5(beginDate,endDate);
                _this.getNewForwardOutIncome5(beginDate,endDate);
                _this.getNewForwardInsideIncome5(beginDate,endDate);
                _this.getNewForwardOutIpUse5(beginDate,endDate);
                _this.getNewForwardInsideIpUse5(beginDate,endDate);
            }else{
                _this.getIncomeData(null,null);
                _this.getIpUse(null,null);
                _this.getForwardIncome4(null,null);
                _this.getH5Income4(null,null);
                _this.getForwardIpUse4(null,null);
                _this.getH5IpUse4(null,null);
                _this.getNewTotalIncome5(null,null);
                _this.getNewForwardIncome5(null,null);
                _this.getNewH5Income5(null,null);
                _this.getNewIpUse5(null,null);
                _this.getNewForwardIpUse5(null,null);
                _this.getNewH5IpUse5(null,null);
                _this.getForwardOutIncome5(null,null);
                _this.getForwardInsideIncome5(null,null);
                _this.getForwardOutIpUse5(null,null);
                _this.getForwardInsideIpUse5(null,null);
                _this.getNewForwardOutIncome5(null,null);
                _this.getNewForwardInsideIncome5(null,null);
                _this.getNewForwardOutIpUse5(null,null);
                _this.getNewForwardInsideIpUse5(null,null);
            }
        },
        showDateRange:function () {
            var _this = this;
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            // console.log(layui);
            layui.use('laydate', function(){
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#creTime',
                    position:'fixed',
                    range:true,
                    done:function(value, date, endDate){

                    }
                });
            });
        },

        goToDetails:function () {
            $("#goDetails").click(function () {
                window.location.href = "modules/view/mainDetails.html";
            });
        },
        setHours:function () {
            var hours = [];
            for (let i=0;i<24;i++){
                hours.push(i);
            };
            return hours;
        },
        setTimer:function (time,timeType) {
            var _this = this;
            _this.getIncomeData(null,null);
            _this.getIpUse(null,null);
            _this.getForwardIncome4(null,null);
            _this.getH5Income4(null,null);
            _this.getForwardIpUse4(null,null);
            _this.getH5IpUse4(null,null);
            _this.getNewTotalIncome5(null,null);
            _this.getNewForwardIncome5(null,null);
            _this.getNewH5Income5(null,null);
            _this.getNewIpUse5(null,null);
            _this.getNewForwardIpUse5(null,null);
            _this.getNewH5IpUse5(null,null);
            _this.getForwardOutIncome5(null,null);
            _this.getForwardInsideIncome5(null,null);
            _this.getForwardOutIpUse5(null,null);
            _this.getForwardInsideIpUse5(null,null);
            _this.getNewForwardOutIncome5(null,null);
            _this.getNewForwardInsideIncome5(null,null);
            _this.getNewForwardOutIpUse5(null,null);
            _this.getNewForwardInsideIpUse5(null,null);
        },
        getNewForwardInsideIpUse5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newForwardInsideIpUse:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemForwardAreaInIpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                       _this.newForwardInsideIpUse5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getNewForwardOutIpUse5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newForwardOutIpUse:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemForwardAreaOutIpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                       _this.newForwardOutIpUse5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getNewForwardInsideIncome5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newForwardInsideIncome:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemForwardAreaInExpandPriceLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                       _this.newForwardInsideIncome5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getNewForwardOutIncome5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newForwardOutIncome:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemForwardAreaOutExpandPriceLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                       // console.log(result.result)
                        _this.newForwardOutIncome5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getForwardInsideIpUse5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:forwardInsideIpUse:showCharts",
                url: baseURL+"articleStatisNew/getForwardAreaInStatisticsIpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.forwardInsideIpUse5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getForwardOutIpUse5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:forwardOutIpUse:showCharts",
                url: baseURL+"articleStatisNew/getForwardAreaOutStatisticsIpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.forwardOutIpUse5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getForwardInsideIncome5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:forwardInsideIncome:showCharts",
                url: baseURL+"articleStatisNew/getForwardAreaInExpandPriceLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.forwardInsideIncome5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getForwardOutIncome5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:forwardOutIncome:showCharts",
                url: baseURL+"articleStatisNew/getForwardAreaOutExpandPriceLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.forwardOutIncome5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getNewH5IpUse5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newH5IpUse:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemH5IpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.newH5IpUse5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getNewForwardIpUse5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newForwardIpUse:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemForwardAreaIpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.newForwardIpUse5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getNewIpUse5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newIpUse:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemIpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.newIpUse5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getNewH5Income5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newH5Income:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemH5ExpandPriceLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.newH5Income5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getNewForwardIncome5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newForwardIncome:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemForwardAreaExpandPriceLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.newForwardIncome5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getNewTotalIncome5:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:newTotalIncome:showCharts",
                url: baseURL+"articleStatisNew/getNewSystemExpandPriceLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.newTotalIncome5(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getH5IpUse4:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:h5IpUse:showCharts",
                url: baseURL+"articleStatisNew/getH5StatisticsIpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.h5IpUse(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getForwardIpUse4:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:forwardIpUse:showCharts",
                url: baseURL+"articleStatisNew/getForwardAreaStatisticsIpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.forwardIpUse(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getH5Income4:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"income:h5Income:showCharts",
                url: baseURL+"articleStatisNew/getH5ExpandPriceLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.h5Income(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
       getForwardIncome4:function (b,e) {
           var _this = this;
           var data = {
               beginDate:b,
               endDate:e
           };
           ajaxc({
               type: "POST",
               permit:"income:forwardIncome:showCharts",
               url: baseURL+"articleStatisNew/getForwardAreaExpandPriceLineChart",
               data: JSON.stringify(data),
               contentType:'application/json;charset=utf-8',
               success: function(result){
                   if(result.code == 0){//登录成功
                       //console.log(result.result)
                       _this.forwardIncome(result.result,"income");
                   }else{
                       layer.msg(result.msg);
                   }
               }
           });
       },
        getIncomeData:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"useAndIncome:income:incomeChart",
                url: baseURL+"articleStatis/getExpandPriceLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.incomeChart(result.result,"income");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        getIpUse:function (b,e) {
            var _this = this;
            var data = {
                beginDate:b,
                endDate:e
            };
            ajaxc({
                type: "POST",
                permit:"useAndIncome:ipUse:ipUseChart",
                url: baseURL+"articleStatis/getStatisticsIpLineChart",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        _this.ipUseChart(result.result,'ipUse');
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },

        commonOption:function (id,title,legendArr,yTData,xAxis,timeType) {
            var _this = this;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));
            // console.log(myChart)
            var dataZoomOpt;
            var axLabel = {
                formatter:'{value}'
            };
           if(title=='IP数' || timeType != "minute"){
                dataZoomOpt = [];
            }else{
                dataZoomOpt = [{
                    startValue: '00:00'
                }, {
                    type: 'inside'
                }];

            }
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: title
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                            formatter:function (params) {
                                return parseFloat(params.value).toFixed(0)
                            }
                        }
                    }
                },
                //color:['#2ec770','#1c97f5'],
                legend: {
                    type: 'scroll',
                    // orient: 'vertical',
                    data:legendArr,
                    left: '10%',
                    right:'230px',
                    top:'40px'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top:'90px',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    name:'时间',
                    nameLocation:'start',
                    axisLabel: {
                        showMaxLabel: true
                    },
                    axisPointer:{
                        label:axLabel
                    },
                    data:xAxis
                },
                yAxis: {
                    type: 'value',
                    name:'数量'
                },
                color:['#2d8cf0','#19be6b', '#ff9900', '#e46cbb', '#9a66e4','#ed3f14','#CC9900','#9999FF','#996600','#009900','#336666','#666600','#9999CC'],
                dataZoom:dataZoomOpt,
                series:yTData
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option,true);

        },
        loopOpt:function (platFormList,countList) {
            var legendArr = [];
            //console.log(platFormList)
            platFormList.map(function (item) {
                legendArr.push(item.platformName);
            });
            var seriesData = [];
            for(var i = 0;i< platFormList.length;i++){
                for(var j = 0;j<countList.length;j++){
                    if(platFormList[i].platformId == countList[j].platformId){
                        var obj = {
                            name:platFormList[i].nickName,
                            type:'line',
                            smooth: true,
                            data:countList[j].counts
                        };
                        seriesData.push(obj);
                    }
                }
            };
            var params = {
                legend:legendArr,
                seriesData:seriesData
            };
            return params;
        },
        incomeChart:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income','收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        ipUseChart:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('ipUse','ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        forwardIncome:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('forwardIncome4','转发区收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        h5Income:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('h5Income4','h5收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        forwardIpUse:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('forwardIpUse4','转发区ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        h5IpUse:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('h5IpUse4','h5ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newTotalIncome5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newTotalIncome','新广告系统收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newForwardIncome5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newForwardIncome','新广告系统转发区收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newH5Income5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newH5Income','新广告系统h5收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newIpUse5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newIpUse','新广告系统ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newForwardIpUse5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newForwardIpUse','新广告系统转发区ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newH5IpUse5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newH5IpUse','新广告系统h5ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        forwardOutIncome5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_forwardOutIncome','转发区外部收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        forwardInsideIncome5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_forwardInsideIncome','转发区内部收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        forwardOutIpUse5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_forwardOutIpUse','转发区外部ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        forwardInsideIpUse5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_forwardInsideIpUse','转发区内部ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newForwardOutIncome5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newForwardOutIncome','新转发区外部收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newForwardInsideIncome5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newForwardInsideIncome','新转发区内部收益',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newForwardOutIpUse5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newForwardOutIpUse','新转发区外部ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        },
        newForwardInsideIpUse5:function (data,timeType) {
            var _this = this;
            var saveData = _this.loopOpt(data.platformList,data.countList);
            this.commonOption('income_newForwardInsideIpUse','新转发区内部ip消耗',saveData.legend,saveData.seriesData,data.xaxis,timeType);
        }
    };
</script>
<style>
    .exportExcelBtn{
        padding: 6px 10px;
        background-color: #0C0C0C;
        color: #fff;
        font-size: 14px;
        border-radius: 2px;
    }
    .exportExcelBtn:hover{
        cursor: pointer;
    }
    .exportExcelBox{
        margin-bottom: 20px;
    }
</style>